<template>
  <div class="JiaoPei">
    <van-nav-bar title="教培" left-arrow @click="backlink()">
      <template #right>
        <van-icon name="search" @click="search"></van-icon>
      </template>
    </van-nav-bar>
    <van-tabs v-model="activeName" @click="changetab" sticky class="groundtab">
      <van-tab title="入门" name="beginner">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in 5" :key="index">
            <img v-lazy="require(`../../assets/images/kaitaibg.jpg`)" alt="" />
          </van-swipe-item>
          <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template>
        </van-swipe>

        <van-row class="row">
          <van-col v-for="(item, index) in 20" :key="index" span="12">
            <div class="item">
              <div class="image">
                <img
                  src="https://iph.href.lu/200x300?fg=666666&bg=cccccc"
                  alt="Image description"
                />
                <div class="stats">
                  <div class="views" style="margin-right: 0.1rem">
                    <van-icon name="eye-o" />
                    123
                  </div>
                  <div class="likes">
                    <van-icon name="like-o" />
                    45
                  </div>
                </div>
              </div>
              <div class="content">
                <h2 class="title">入门入门入门入门入门入门入门</h2>
                <p class="source">来源 XXXXXX</p>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="进阶" name="Advanced">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in 5" :key="index">
            <img v-lazy="require(`../../assets/images/kaitaibg.jpg`)" alt="" />
          </van-swipe-item>

          <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template>
        </van-swipe>

        <van-row class="row">
          <van-col v-for="(item, index) in 20" :key="index" span="12">
            <div class="item">
              <div class="image">
                <img
                  src="https://iph.href.lu/200x300?fg=666666&bg=cccccc"
                  alt="Image description"
                />
                <div class="stats">
                  <div class="views" style="margin-right: 0.1rem">
                    <van-icon name="eye-o" />
                    123
                  </div>
                  <div class="likes">
                    <van-icon name="like-o" />
                    45
                  </div>
                </div>
              </div>
              <div class="content">
                <h2 class="title">进阶进阶进阶进阶进阶进阶</h2>
                <p class="source">来源 XXXXXX</p>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-tab>
      <template v-slot:nav-right>
        <div class="blocks" style="width: 60%"></div>
      </template>
    </van-tabs>
  </div>
</template>
  
<script>
export default {
  name: "JiaoPei",
  data() {
    return {
      activeName: "",
    };
  },
  methods: {
    search() {},
    changetab() {},
    backlink(){
      this.$router.back()
    }
  },
};
</script>
  
<style scoped>
.JiaoPei {
  color: red;
}
.van-swipe {
  /* 忽略报错 */
  width: auto;
  height: 200px;
  border-radius: 20px;
  margin: 10px 10px;
}

.custom-indicator {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 5px;
  font-size: 15px;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
}

.row {
  margin: 10px;
}

.item {
  position: relative;
  border-radius: 20px;
  margin: 3px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.image {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  position: relative;
  height: 110px;
}

.stats {
  font-size: 13px;
  position: absolute;
  bottom: 0;
  left: 5px;
  display: flex;
  justify-content: space-between;
  color: grey;
  padding: 5px;
}

.title {
  color: black;
  font-weight: bold;
  font-size: 18px;
  word-break: break-word;
}

.source {
  font-size: 13px;
  color: grey;
}

.content {
  padding: 10px;
}
</style>